<template>
	<div id="meizhuang">
		
		<!-- <div class="head">
			<div class="searchBox">
				<div class="searchBtn"></div>
				<input  type="text" class="search" placeholder="故宫口红"/>
			</div>
		</div> -->
		
		
		<ul class="meizhuangList">
			<li>
				<img src="../../../assets/img/kouhong2.png"/>
				<p>口红</p>
			</li>
			<li>
				<img src="../../../assets/img/kouhong2.png"/>
				<p>口红</p>
			</li>
			<li>
				<img src="../../../assets/img/kouhong2.png"/>
				<p>口红</p>
			</li>
			<li>
				<img src="../../../assets/img/kouhong2.png"/>
				<p>口红</p>
			</li>
			<li>
				<img src="../../../assets/img/kouhong2.png"/>
				<p>口红</p>
			</li>
			<li>
				<img src="../../../assets/img/kouhong2.png"/>
				<p>口红</p>
			</li>
			<li>
				<img src="../../../assets/img/kouhong2.png"/>
				<p>口红</p>
			</li>
			<li>
				<img src="../../../assets/img/kouhong2.png"/>
				<p>口红</p>
			</li>
		</ul>
	</div>
	
</template>

<script>
	
	
	export default {
		name: "meizhuang",
		data() {
			return {
				List:[
					{
						id:'1',
						text:'上新馆',
						path: 'shangxin',
					},
					{
						id:'2',
						text:'出版馆',
						path: 'meizhuang',
					},
					{
						id:'3',
						text:'美妆馆',
						path: 'meizhuang',
					},
					{
						id:'4',
						text:'文房馆',
						path: 'meizhuang',
					},
					{
						id:'5',
						text:'香氛馆',
						path: 'meizhuang',
					},
					{
						id:'6',
						text:'首饰馆',
						path: 'meizhuang',
					},
					{
						id:'7',
						text:'铜器馆',
						path: 'meizhuang',
					},
					{
						id:'8',
						text:'陶瓷馆',
						path: 'meizhuang',
					},
					{
						id:'9',
						text:'丝绸馆',
						path: 'meizhuang',
					},
					{
						id:'10',
						text:'家居馆',
						path: 'meizhuang',
					},
				]
			};
		},
		components:{
			
			
		}
	}
</script>



<style scoped="scoped" lang="less">
	#meizhuang .banner{
		background-image: url(../../../assets/img/fenlei-banner.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		width: 2.69rem;
		height: 1rem;
		position: absolute;
		top: 1rem;
		left: 0.92rem;
	}
	
	
	
	#meizhuang .meizhuangList {
		display: flex;
		flex-wrap: wrap;
		margin-right: 0.49rem;
		// margin: 0.21rem 0.42rem 0 0.42rem;
		justify-content: space-between;
		position: absolute;
		top: 2.21rem;
		left: 1.24rem;
	}
	
	#meizhuang .meizhuangList li{
		display: flex;
		flex-direction: column;
		text-align: center;
		margin-top: 0.19rem;
	}
	
	#meizhuang .meizhuangList li:nth-child(1){
		margin-top: 0;
	}
	
	#meizhuang .meizhuangList li:nth-child(2){
		margin-top: 0;
	}
	
	#meizhuang .meizhuangList li img{
		width: 0.8rem;
		height: 0.8rem;
	}
	
	#meizhuang .meizhuangList li p{
		font-size: 0.16rem;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	
</style>